<template>

      <div class="row">
        <div class="col-md-12">
          <h1 class="page-header">
            添加课程 <small></small>
            <el-button type="primary" @click="jumpTo('curriculumSeries')" class="float-right" circle>
              <el-icon :size="20" style="vertical-align: middle;">
                <Back></Back>
              </el-icon>
            </el-button>
<!--            <button >返回课程列表</button>-->
          </h1>
        </div>
      </div>
      <!-- /. ROW  -->
      <div class="row">
        <div class="col-lg-12">
          <div class="panel panel-default">
            <div class="panel-heading">
              课程基本信息
            </div>
            <div class="panel-body">
              <div class="row grid justify-items-stretch">
                <div class="col-lg-8 justify-self-center">
                  <div class="form-group">
                    <label>课程名称</label>
                    <input v-model="curriculum_name" class="form-control">
                  </div>
                  <div class="form-group">
                    <label>课程简介</label>
                    <div id="editor">
                    </div>
                    <div id="toolbar">
      <span class="ql-formats">
        <select class="ql-font"></select>
        <select class="ql-size"></select>
      </span>
                      <span class="ql-formats">
        <button class="ql-bold"></button>
        <button class="ql-italic"></button>
        <button class="ql-underline"></button>
        <button class="ql-strike"></button>
      </span>
                      <span class="ql-formats">
        <select class="ql-color"></select>
        <select class="ql-background"></select>
      </span>
                      <span class="ql-formats">
        <button class="ql-script" value="sub"></button>
        <button class="ql-script" value="super"></button>
      </span>
                      <span class="ql-formats">
        <button class="ql-header" value="1"></button>
        <button class="ql-header" value="2"></button>
        <button class="ql-blockquote"></button>
        <button class="ql-code-block"></button>
      </span>
                      <span class="ql-formats">
        <button class="ql-list" value="ordered"></button>
        <button class="ql-list" value="bullet"></button>
        <button class="ql-indent" value="-1"></button>
        <button class="ql-indent" value="+1"></button>
      </span>
                      <span class="ql-formats">
        <button class="ql-direction" value="rtl"></button>
        <select class="ql-align"></select>
      </span>
                      <span class="ql-formats">
        <button class="ql-link"></button>
        <button class="ql-image"></button>
                        <!--      <button class="ql-video"></button>-->
                        <!--        <button class="ql-formula"></button>-->
      </span>
                      <span class="ql-formats">
        <button class="ql-clean"></button>
      </span>
                    </div>
                  </div>
                  <a @click="showTest" class="btn btn-primary btn-lg">新增课程</a>
                </div>
                <!-- /.col-lg-6 (nested) -->
              </div>
              <!-- /.row (nested) -->
            </div>
            <!-- /.panel-body -->
          </div>
          <!-- /.panel -->
        </div>
        <!-- /.col-lg-12 -->
      </div>

</template>

<script >

import axios from "axios";
import {ElMessage} from 'element-plus'
import {Back} from '@element-plus/icons-vue'
export default {
  name: "add_curriculum_series",
  components: {Back},
  mounted() {
    this.curriculum_name = "wda"
    Quill.register('modules/image', true)
    var quill = new Quill('#editor', {
      theme: 'snow',
      modules: {
        toolbar: '#toolbar'
      }
    });
    this.quillIns = quill
  },
  data() {
    return {
      curriculum_name: ""
    }
  },
  // data() {
  //   return {
  //     curriculum_name:""
  //   }
  // },
  methods: {
    jumpTo: function (name) {
      this.$router.push({name: name})
    },
    showTest: function () {
      var QuillDeltaToHtmlConverter = require('quill-delta-to-html').QuillDeltaToHtmlConverter;
      var deltaOps = this.quillIns.getContents().ops
      var cfg = {};
      var converter = new QuillDeltaToHtmlConverter(deltaOps, cfg);
      var html = converter.convert();

      axios.post("/api/teacher/SetNewCurriculumSeries",
          {
            "CurriculumSeriesName": this.curriculum_name,
            "CurriculumSeriesDescribe": html
          }
      ).then((res) => {
        if (res.status === 200) {
          ElMessage.success({
            message: JSON.stringify("添加成功"),

          })
          this.jumpTo('curriculumSeries')
        }
      })
    }
  }
}
</script>

<style scoped>

</style>